import React, { Component } from 'react'
import { Alert, Row, Col, Form, Select, DatePicker, InputNumber, Icon } from 'antd';
import moment from 'moment';
import { BasicLayoutSearch, BasicLayout } from '../../../components/BasicLayout';
import { TableCustomize } from '../../../components/TableCustomize';
import * as GetSuooliseService from '../../../axios/GetSuoolise'
import './styles.scss'
const FormItem = Form.Item;
const { Option } = Select
const dateFormat = 'YYYY-MM-DD';
const date = new Date();
const nowDate = date.toLocaleString();
class PickingTable extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedRows: [],
            columns: [
                {
                    title: '序号',
                    dataIndex: 'serialNumber',
                    width: 50,
                    align: 'center',
                    render: (text, record, index) => `${index + 1}`,
                },
                {
                    title: '物料编码',
                    width: 150,
                    dataIndex: 'partCode',
                },
                {
                    title: '图号',
                    width: 150,
                    dataIndex: 'paperCode',
                },
                {
                    title: '物料名称',
                    width: 150,
                    dataIndex: 'partName',
                },
                {
                    title: '物料规格',
                    width: 150,
                    dataIndex: 'partSpec',
                },
                {
                    title: '仓库',
                    width: 100,
                    dataIndex: 'storeName',
                },
                {
                    title: '领料数量',
                    dataIndex: 'requestNumber',
                    width: 100,
                    render: (text, record, index) =>
                        <InputNumber min={0} onChange={(e) => this.onChange(e, record, index)} defaultValue={(record.partNeedNum - record.partReceivedNum)}></InputNumber>
                },
                {
                    title: '需求数量',
                    dataIndex: 'partReceivedNum',
                    width: 80,
                    render: (text, record) => text + '/' + record.partNeedNum
                },
                {
                    title: '操作',
                    dataIndex: 'opts',
                    width: 100,
                    render: (text, record, index) =>
                        <a onClick={this.cancel.bind(this, record, index)}>取消操作</a>
                },
                { dataIndex: '' }
            ],
            issueData: {},
            acceptMap: [],
            batchSet: [],
            storeCodeSet: [],
            loadingAll: false,
            groupCodeSet: []
        }
    }
    componentDidMount() {
        const { issueData, selectedRows, saveAcceptMap, nowDates } = this.props;
        nowDates(nowDate)
        console.log('这是啥', issueData);
        const acceptMap = issueData.acceptMap;
        const batchSet = issueData.batchSet;
        const storeCodeSet = issueData.storeCodeSet;
        const groupCodeSet = issueData.groupCodeSet
        const batchNos = {}
        // console.log(acceptMap, batchSet);
        batchSet.forEach((value, index) => {
            acceptMap[value].forEach((value_1, index_1) => {
                // value_1.groupCode = groupCodeSet[0] !== null ? (groupCodeSet[index].batchNo === storeCodeSet[index] ? groupCodeSet[index].groupCode : groupCodeSet[index].groupCode) : null
                // value_1.seat = groupCodeSet[0] !== null ? (groupCodeSet[index].batchNo === storeCodeSet[index] ? groupCodeSet[index].seat : groupCodeSet[index].seat) : null
                // 20230721 -- 改
                value_1.groupCode = issueData.assemblyGroup || null
                value_1.seat = issueData.seat || null
                value_1.requestNumber = value_1.partNeedNum
            })
        })
        batchSet.forEach((value_2, index_2) => {
            batchNos[value_2] = groupCodeSet[0] !== null ? (groupCodeSet[index_2]) : null
        })
        // console.log('这是什么', batchNos);
        console.log('这是', acceptMap);
        saveAcceptMap(acceptMap);
        let data = []
        GetSuooliseService.seatList().then((value) => {
            if (value.data.code !== 200) {
                return
            }
            let seatList = value.data.data
            for (const key in seatList) {
                data.push({ code: key, seatList: seatList[key] })
            }
            this.setState({
                seatList: data
            })
        })
        GetSuooliseService.groupList().then((value) => {
            if (value.data.code !== 200) {
                return
            }
            this.setState({
                groupList: value.data.data
            })
        })
        this.setState({ issueData, acceptMap, batchSet, storeCodeSet, selectedRowsLength: selectedRows.length, groupCodeSet, batchNos })
        // saveAcceptMap(this.state.acceptMap)
    }
    onChange = (e, record) => {
        record.requestNumber = e;
        setTimeout(() => {
            const { saveAcceptMap } = this.props;
            saveAcceptMap(this.state.acceptMap)
        });
    }
    // 取消选择
    cancel = (a, index) => {
        const { acceptMap } = this.state;
        // console.log('这是', acceptMap[a.batchNo], '这是1', this.state.selectedRowsLength);
        let dataSource = acceptMap[a.batchNo];
        let selectedRowsLength = this.state.selectedRowsLength;
        dataSource.splice(index, 1);
        selectedRowsLength = selectedRowsLength - 1
        if (acceptMap[a.batchNo].length < 1) {
            this.closeBatchList()
            delete (acceptMap[a.batchNo])
        }
        // console.log(dataSource);
        this.setState({
            acceptMap,
            selectedRowsLength
        }, () => {
            const { saveAcceptMap } = this.props;
            saveAcceptMap(this.state.acceptMap)
        })
    }
    closeBatchList = (index, item) => {
        const { batchSet, acceptMap } = this.state;
        batchSet.splice(index, 1);
        const { saveAcceptMap } = this.props;
        delete (acceptMap[item])
        saveAcceptMap(acceptMap)
        this.setState({ batchSet, acceptMap })
    }
    changeDate = (date, dateString, item) => {
        // console.log(date, dateString, nowDate);
        let requestTime = moment(date).format("YYYY-MM-DD HH:mm:ss")
        let dates = moment(nowDate).format("YYYY-MM-DD HH:mm:ss")
        const { acceptMap } = this.state;
        for (var item of acceptMap[item]) {
            item.requestTime = requestTime;
            item.createTime = dates
        }
        this.setState({ acceptMap }, () => setTimeout(() => {
            const { saveAcceptMap } = this.props;
            saveAcceptMap(acceptMap);
        }))
    }
    groupName = (value, item, index) => {
        const { acceptMap } = this.state;
        for (var item of acceptMap[item]) {
            item.groupCode = value
        }
        this.setState({ acceptMap }, () => {
            const { saveAcceptMap } = this.props;
            saveAcceptMap(acceptMap);
        })
    }
    seat = (v, item, index) => {
        const { acceptMap } = this.state;
        acceptMap[item].forEach((value, index) => {
            value.seat = v
        })
        console.log('改变', acceptMap);
        this.setState({ acceptMap }, () => {
            const { saveAcceptMap } = this.props;
            saveAcceptMap(acceptMap);
        })
    }
    render() {
        const { groupCodeSet, loading, columns, acceptMap, batchSet, storeCodeSet, seatList, groupList, batchNos, issueData } = this.state;

        console.log(issueData, 'issueData');
        const batchSetStr = batchSet.join(',');
        const getSelectedRowsLength = () => {
            let length = 0;
            for (var key in acceptMap) {
                if (acceptMap[key]) {
                    length += acceptMap[key].length
                }
            }
            return length
        }
        return <div style={{ marginBottom: 10 }}>
            <Row gutter={24}>
                <Col span={8}>
                    <div>创建者: {localStorage.getItem('userName')}</div>
                    <div>创建时间：{nowDate}</div>
                </Col>
                <Col span={16}>
                    {/* ，涵盖 2 个机位，2 个班组 */}
                    <Alert message={<span>已选择 {getSelectedRowsLength()} 项，包括 {batchSet.length} 个批号{batchSetStr}，将被拆分 {Object.keys(acceptMap).length} 份领料单,共涉及 {batchSet.length ? storeCodeSet.length : 0} 个仓库。</span>} type="info" showIcon />
                </Col>
            </Row>
            {
                batchSet && batchSet.map((item, index) => {
                    return <BasicLayoutSearch key={item}>
                        <Form className="search-form" style={{ marginBottom: 10, position: 'relative' }}>
                            <Row gutter={24}>
                                <Col span={6}>
                                    <span>批号：</span>
                                    <span style={{ fontWeight: 'bold' }}>{item}</span>
                                </Col>
                                <Col span={6}>
                                    <span>机型：</span>
                                    <span style={{ fontWeight: 'bold' }}>{acceptMap[item].length >= 1 ? acceptMap[item][0].model : null}</span>
                                </Col>
                                <Col span={6} style={{ display: 'flex', alignItems: 'center' }}>
                                    <span style={{ wordBreak: 'keep-all' }}>装配机位：</span>
                                    {/* <Select allowClear={true} defaultValue={batchNos[item] !== null ? (batchNos[item].seat !== null && batchNos[item].seat !== undefined ? batchNos[item].seat : null) : null} onChange={(value) => this.seat(value, item, index)}> */}
                                    <Select allowClear={true} defaultValue={issueData.seat} onChange={(value) => this.seat(value, item, index)}>
                                        {
                                            seatList !== undefined && seatList !== null ? seatList.map((value_1, index_1) =>
                                                <Option key={`${index_1}_${value_1.code}`} value={value_1.code}>{value_1.seatList}</Option>
                                            ) : null
                                        }
                                    </Select>
                                </Col>
                                <Col span={6} style={{ display: 'flex', alignItems: 'center' }}>
                                    <span style={{ wordBreak: 'keep-all' }}>装配班组：</span>
                                    {/* <Select allowClear={true} defaultValue={batchNos[item] !== null ? (batchNos[item].groupCode !== null && batchNos[item].groupCode !== undefined ? batchNos[item].groupCode : null) : null} onChange={(value) => this.groupName(value, item, index)}> */}
                                    <Select allowClear={true} defaultValue={issueData.assemblyGroup} onChange={(value) => this.groupName(value, item, index)}>
                                        {
                                            groupList !== undefined && seatList !== null ? groupList.map((value, index) =>
                                                <Option value={value.groupCode} key={value.id}>{value.groupName}</Option>
                                            ) : null
                                        }
                                    </Select>
                                </Col>

                            </Row>
                            <Row gutter={24}>
                                <Col span={6}>
                                    <span>领料订单：</span>
                                    <span style={{ fontWeight: 'bold' }}>{acceptMap[item].length >= 1 ? acceptMap[item][0].acceptCode : null}</span>
                                </Col>
                                <Col span={6} style={{ display: 'flex', alignItems: 'center' }}>
                                    <span style={{ wordBreak: 'keep-all' }}>需求时间：</span>
                                    <DatePicker onChange={(date, dateString) => this.changeDate(date, dateString, item)} />
                                </Col>

                            </Row>
                            <div className='closeIcon'><Icon type="close-circle" onClick={() => this.closeBatchList(index, item)} /></div>
                        </Form>
                        <TableCustomize
                            columns={columns}
                            rowKey={record => record.id}
                            dataSource={acceptMap[item]}
                            pagination={false}
                            loading={loading}
                            scroll={{ y: 300 }}
                            rowClassName={(record, index) => {
                                return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                            }}
                        />
                    </BasicLayoutSearch>
                })
            }
        </div >
    }
}
export default Form.create()(PickingTable)

